<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>角色管理</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="pageContentWhole">
      <a-row>
        <a-col :span="24">
          <a-form layout="inline">
            <a-form-item label="角色">
              <a-input v-model="searchForm.name" />
            </a-form-item>
            <a-form-item label="创建时间">
              <a-range-picker @change="onChange">
                <a-icon slot="suffixIcon" type="calendar" />
              </a-range-picker>
            </a-form-item>

            <a-form-item>
              <a-button type="primary" @click="handleSubmit">查询</a-button>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="handleCreate">+ 创建角色</a-button>
            </a-form-item>
          </a-form>

          <a-table
            :columns="columns"
            :data-source="tableData"
            class="tableMargin"
            :pagination="pagination"
            rowKey="roleId"
          >
            <template slot="rn" slot-scope="text, record, index">{{index + 1}}</template>
            <template slot="operation" slot-scope="text, record">
              <a @click="editIt(record.roleId)">编辑</a>
              <a @click="viewIt(record.roleId)">查看</a>
              <a @click="deleteIt(record.roleId, record.isUser)" style="color: red">删除</a>
            </template>
          </a-table>
        </a-col>
      </a-row>
    </div>
    <Role
      :editRoleId="editRoleId"
      :visible="visible"
      :isView="isView"
      @set-visible="setVisible"
      @refresh-data="handleSubmit"
    />
  </div>
</template>

<script>
import { queryRoleList, deleteRole } from '@/api/systemPersonnelManage'
import Role from './role'

export default {
  components: {
    Role
  },
  data () {
    return {
      searchForm: {
        name: '',
        time1: '',
        time2: ''
      },
      columns: [{
        title: '序号',
        width: 60,
        scopedSlots: { customRender: 'rn' }
      }, {
        title: '角色',
        dataIndex: 'name',
        ellipsis: true
      }, {
        title: '是否被使用',
        dataIndex: 'isUser',
        customRender: (text, row, index) => {
          if (text === 1) {
            return <a-badge status="success" text="是" />
          } else if (text === 0) {
            return <a-badge status="error" text="否" />
          }
        }
      }, {
        title: '创建时间',
        dataIndex: 'createTime',
        ellipsis: true
      }, {
        title: '操作',
        width: 150,
        scopedSlots: { customRender: 'operation' }
      }],
      tableData: [],
      pagination: {},
      pageNum: 1,
      pageSize: 10,
      // 查看 编辑 创建角色组件
      editRoleId: null,
      visible: false,
      isView: false
    }
  },
  methods: {
    getRoleList () {
      queryRoleList({
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(rsp => {
        this.tableData = rsp.data.list
        this.pagination = {
          current: this.pageNum,
          pageSize: rsp.data.pageSize,
          total: rsp.data.total,
          showQuickJumper: false,
          showSizeChanger: true,
          showTotal: total => `共${total}条记录 第${this.pageNum}/${rsp.data.pages}页`,
          onChange: pageNum => {
            this.pageNum = pageNum
            this.getRoleList()
          },
          onShowSizeChange: (current, size) => {
            this.pageNum = current
            this.pageSize = size
            this.getRoleList()
          }
        }
      })
    },
    onChange (date, dateStr) {
      this.searchForm.time1 = dateStr[0]
      this.searchForm.time2 = dateStr[1]
    },
    setVisible (visible) {
      this.visible = visible
    },
    handleSubmit () {
      this.pageNum = 1
      this.getRoleList()
    },
    handleCreate () {
      if (!this.$root._bc.create) {
        this.$message.error('您无此权限！')
        return
      }
      this.editRoleId = ''
      this.isView = false
      this.visible = true
    },
    editIt (roleId) {
      if (!this.$root._bc.edit) {
        this.$message.error('您无此权限！')
        return
      }
      this.editRoleId = roleId
      this.isView = false
      this.visible = true
    },
    viewIt (roleId) {
      this.editRoleId = roleId
      this.isView = true
      this.visible = true
    },
    deleteIt (roleId, isUsed) {
      if (!this.$root._bc.drop) {
        this.$message.error('您无此权限！')
        return
      }
      if (isUsed === 1) {
        this.$message.error('该角色正在被使用，无法删除')
      } else {
        let _this = this
        this.$confirm({
          title: '确认删除该角色？',
          okText: '删除',
          okType: 'danger',
          onOk () {
            deleteRole({ roleId }).then(rsp => {
              _this.$message.success('角色删除成功！')
              _this.getRoleList()
            })
          }
        })
      }
    }
  },
  created () {
    this.getRoleList()
  }
}
</script>

<style lang="less" scoped>
</style>
